<template>
  <!-- 查询条件 称重日期 羊只耳号 称重类型 品种 性别 称重月龄  -->
  <el-form :model="form" label-width="auto" :inline="true">
    <!-- 日期框 称重日期 -->
    <el-form-item label="称重日期：">
      <el-date-picker
        v-model="form.begDate"
        type="date"
        placeholder="请选择开始时间"
        :disabled-date="disabledDate"
        :shortcuts="shortcuts"
        format="YYYY/MM/DD"
        value-format="YYYY-MM-DD"
      />
      -
      <el-date-picker
        v-model="form.endDate"
        type="date"
        placeholder="请选择结束时间"
        :disabled-date="disabledDate"
        :shortcuts="shortcuts"
        format="YYYY/MM/DD"
        value-format="YYYY-MM-DD"
      />
    </el-form-item>
    <!-- 羊只耳号 -->
    <el-form-item label="羊只耳号：">
      <el-input v-model="form.auricle" />
    </el-form-item>
    <!-- 下拉框 称重类型 -->
    <el-form-item label="称重类型：" style="width: 260px">
      <el-select v-model="form.sheepWeighedType" placeholder="请选择称重类型">
        <el-option label="断奶重" value="1" />
        <el-option label="月龄重" value="2" />
        <el-option label="出生重" value="3" />
      </el-select>
    </el-form-item>
    <!-- 下拉框 品种 -->
    <el-form-item label="品种：" style="width: 260px">
      <el-select v-model="form.sheepvarietyId" placeholder="请选择品种">
        <el-option
          v-for="item in sheepvarietyList"
          :label="item.sheepvarietyName"
          :value="item.sheepvarietyId"
        />
      </el-select>
    </el-form-item>
    <!-- 下拉框 性别 -->
    <el-form-item label="性别：" style="width: 260px">
      <el-select v-model="form.sexs" placeholder="请选择性别">
        <el-option label="公" value="1" />
        <el-option label="母" value="2" />
      </el-select>
    </el-form-item>
    <!-- 称重月龄 -->
    <el-form-item label="称重月龄：" style="width: 260px">
      <el-input
        v-model="form.startMonthAge"
        style="width: 200px"
      />-<el-input v-model="form.endMonthAge" style="width: 200px" ></el-input>
    </el-form-item>
    <!-- 按钮 查询 新增 重置 -->
    <el-form-item>
      <el-button type="danger" @click="getsheepWeighedList">查询</el-button>
      <el-button>重置</el-button>
      <el-button type="danger" @click="postAll">新增</el-button>
    </el-form-item>
  </el-form>

  <!-- 显示数据 -->
  <el-table
    :data="sheepWeighedList"
    style="width: 100%"
    @selection-change="checkAll"
  >
   <el-table-column type="selection" width="55" />
    <el-table-column prop="sheepWeighedId" label="序号" />
    <el-table-column prop="sheepWeighedTime" label="称重日期">
      <template v-slot="scope">
        {{ scope.row.sheepWeighedTime.substring(0,10) }}
      </template>
    </el-table-column>
    <el-table-column prop="auricle" label="耳号" />
    <el-table-column prop="sheepvarietyName" label="品种" />
    <!-- Tag标签 性别 -->
    <el-table-column prop="sheepSex" label="性别">
      <template v-slot="scope">
        <el-tag type="primary" v-if="scope.row.sheepSex == 1">公</el-tag>
        <el-tag type="danger" v-else>母</el-tag>
      </template>
    </el-table-column>
    <el-table-column prop="sheepWeighedType" label="称重类型" >
      <template v-slot="scope">
        <el-tag type="success" v-if="scope.row.sheepWeighedType == 1">断奶重</el-tag>
        <el-tag type="warning" v-else-if="scope.row.sheepWeighedType == 2">月龄重</el-tag>
        <el-tag type="primary" v-else>出生重</el-tag>
      </template>
    </el-table-column>
    <el-table-column prop="sheepWeighedHeight" label="重量(公斤)" />
    <el-table-column  label="称重月龄">
      <template v-slot="scope"> 
        {{  Math.ceil((new Date(time2).getTime() - new Date(scope.row.sheepWeighedTime).getTime()) / (1000 * 60 * 60 * 24 * 30)) }}
      </template>
    </el-table-column>
    <!-- <el-table-column prop="date" label="创建人" />
    <el-table-column prop="name" label="创建时间" />
    <el-table-column prop="name" label="修改时间" /> -->
  </el-table>

 <!-- 分页 -->
 <table>
    <tr>
      <!-- 1. -->
      <td>
        <el-pagination
          v-model:current-page="form.pageIndex"
          v-model:page-size="form.pageSize"
          :page-sizes="[1, 3, 6, 9]"
          :size="form.pageSize"
          :background="true"
          layout="total,slot, sizes"
          :total="form.totalCount"
          prev-text="上一页"
          next-text="下一页"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        >
          数据，每页显示{{ form.pageSize }}条数据，当前第1/{{
            form.pageIndex
          }}页，共{{ form.pageCount }}页。
        </el-pagination>
      </td>
      <!-- 2. -->
      <td>
        <el-pagination
          v-model:current-page="form.pageIndex"
          v-model:page-size="form.pageSize"
          :page-sizes="[1, 3, 6, 9]"
          :size="form.pageSize"
          :background="true"
          layout="slot,prev, pager"
          :total="form.totalCount"
          prev-text="上一页"
          next-text="下一页"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        >
          <el-button @click="handleCurrentChange(1)">首页</el-button>
        </el-pagination>
      </td>
      <!-- 3. -->
      <td>
        <el-pagination
          v-model:current-page="form.pageIndex"
          v-model:page-size="form.pageSize"
          :page-sizes="[1, 3, 6, 9]"
          :size="form.pageSize"
          :background="true"
          layout="next,slot, jumper"
          :total="form.totalCount"
          prev-text="上一页"
          next-text="下一页"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        >
          <el-button @click="handleCurrentChange(form.pageCount)"
            >尾页</el-button
          >
        </el-pagination>
      </td>
    </tr>
  </table>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from "vue";
import axios from "axios";


//生命周期 钩子函数
onMounted(() => {
  getsheepWeighedList(); //羊只称重-显示
  postSheepvarietyBind(); //下拉框 品种
});

const time2 = new Date()

//定义变量
const form = reactive({
  begDate:'',
  endDate:'',
  auricle:'',
  sheepvarietyId: "",
  sheepWeighedType: "",
  sexs:'',
  startMonthAge:'',
  endMonthAge:'',
  //分页
  pageIndex: 1,
  pageSize: 2,
  totalCount: 0,
  pageCount: 0,
});

//全选反选
const checked = ref([]);
const checkAll = (val: any) => {
  checked.value = val;
};

//羊只称重-显示
const sheepWeighedList = ref([]);
const getsheepWeighedList = () => {
  axios
    .post("http://localhost:5012/api/Breedings/SheepWeighedLists",{
      begDate:form.begDate,
      endDate:form.endDate,
      auricle:form.auricle,
      sheepWeighedType:form.sheepWeighedType||0,
      sheepvarietyId:form.sheepvarietyId||0,      
      sexs:form.sexs||0,
      startMonthAge:form.startMonthAge||0,
      endMonthAge:form.endMonthAge||0,

      pageSize:form.pageSize,
      pageIndex:form.pageIndex
    })
    .then((res) => {
      console.log(res.data.data);
      sheepWeighedList.value = res.data.data.data;
      form.pageCount=res.data.data.pageCount;
      form.totalCount=res.data.data.totalCount;
    })
    .catch((err) => {
      console.log(err);
    });
};
//分页
const handleSizeChange = (val: number) => {
  form.pageSize = val;
  getsheepWeighedList();
};
const handleCurrentChange = (val: number) => {
  form.pageIndex = val;
  getsheepWeighedList();
};

//新增跳转 羊只称重
const postAll = () => {
  location.href = "SheepWeighedAdd";
};

//下拉框 品种
const sheepvarietyList = ref([]);
const postSheepvarietyBind = () => {
  axios
    .post("http://localhost:5012/api/Breedings/SheepvarietyBind", {})
    .then((res) => {
      console.log(res);
      sheepvarietyList.value = res.data.data;
    })
    .catch((err) => {
      console.log(err);
    });
};
</script>

<!-- format="YYYY/MM/DD hh:mm:ss"
        value-format="YYYY-MM-DD h:m:s a" -->
